<template>
  <sub-view
    title="订单创建"
    :back="back"
  >
    <order-form
      class="form"
      @submit="submit"
      :sender="sender"
      :receiver="receiver"
    >
    </order-form>
  </sub-view>
</template>

<script>
import OrderForm from 'components/order-form/order-form'
import SubView from 'components/sub-view/sub-view'
import { addOrder } from 'service/order'
import Person from 'classes/person'

export default {
  name: 'order-create',
  data () {
    return {
      sender: new Person(),
      receiver: new Person()
    }
  },
  methods: {
    back () {
      this.$router.push({
        path: '/list'
      })
    },
    resetPerson () {
      this.sender = new Person()
      this.receiver = new Person()
    },
    submit (sender, receiver) {
      this.$toast.loading({
        duration: 0,
        message: '订单提交中...',
        forbidClick: true
      })
      addOrder(sender, receiver)
        .then(id => { this.loadSuc(id) })
        .catch(msg => {
          this.$toast.fail({
            message: '提交失败'
          })
        })
    },
    loadSuc (id) {
      this.resetPerson()
      this.$toast.success({
        message: '提交成功'
      })
      this.$router.push({
        path: '/list/detail',
        query: {
          id
        }
      })
    }
  },
  components: {
    SubView,
    OrderForm
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .form
    padding: 2rem 0
</style>
